import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './index.css'
import { connect } from 'dva';
import Link from 'umi/link';

const theProps = (state) => {
    return {
    }
}

function Login(props) {
    const { dispatch } = props;
    const [form] = Form.useForm();
    const onFinish = (values) => {
        // console.log('Received values of form: ', values);
        dispatch({
            type: 'user/reqLogin',
            payload: {
                username: values.username,
                password: values.password,
            }
        })
    };
    useEffect(() => {
        localStorage.clear()
    })
    return (
        <div className={styles.login}>
            <div className={styles.logo}>
                <div className={styles.logo_img}><h2 className={styles.logo_text}>地质资料管理与分析系统</h2></div>
                <h5>Geological Data Management & Analysis System</h5>
            </div>
            <Form
                name="normal_login"
                className={styles.login_form}
                initialValues={{
                    remember: false,
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Username!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Password!',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                <Form.Item>
                    {/* <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item> */}

                    <Link className={styles.login_form_forgot} to="/login/update">
                        忘记密码
                    </Link>
                </Form.Item>

                <Form.Item>
                    <Button
                        type="primary"
                        // onClick={()=>login() }
                        htmlType="submit"
                        className={styles.login_form_button}
                    >
                        登录
                    </Button>
                </Form.Item>
            </Form>
            <footer className={styles.footer}>
                <h4></h4>
                <h4>copyright © 2021 中国石油西南油气田公司页岩气研究院</h4>
            </footer>
        </div>
    )
}

export default connect(theProps, null)(Login)